<template>
  <div class="user-list">
    <h3>用户列表</h3>
    <!-- :data="filterTableData" -->
    <el-table :data="tableData" style="width: 100%">
      <!-- <el-table-column label="日期" prop="date" /> -->
      <el-table-column label="昵称" prop="nickName" />
      <el-table-column label="账号" prop="account" />
      <el-table-column label="性别" prop="sex" />
      <el-table-column label="年龄" prop="age" />
      <el-table-column label="地址" prop="address" />
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="small" placeholder="搜索" />
        </template>
        <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分类器 -->
    <div class="page">
            <!-- :page-count="page" -->
            <el-pagination
            :page-size="pageSize"
           
            :pager-count="pageSize"
            layout="prev, pager, next"
            :total="totalNum"
            @change="changePageFn"
        />
        </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { userList } from '../../api/request'

// 定义接口，形容对象的结构
interface User {
  date: string
  nickName: string
  address: string
  sex: string
  age: number
  imgUrl: string
  account: string
  id?: number | string
}

const search = ref('')

const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}

// 用户列表数据
const tableData = ref<any>([])

// 用户总数
let totalNum = ref(0)
let page = ref(1)
let pageSize = ref(11)

// 定义函数获取用户列表
const userListFn = async (page = 1, pageSize = 10) => {
  await userList({ page, pageSize }).then(
    content => {
      // console.log(content)
      let { code, total, result } = content;
      if (code == 200) {
        tableData.value = result;
        totalNum.value = total;
      }
    }
  )
}

// 点击分页时执行的函数
const changePageFn = (num: number) =>{
  // console.log(num);
  page.value = num;
  userListFn(page.value, pageSize.value);
}

// 初始化用户列表
userListFn(page.value, pageSize.value);

</script>

<style lang="scss">
.user-list {
  h3 {
    margin-bottom: 15px;
  }
}

.page {
  margin-top: 15px;
  background-color: #fff;
  padding: 10px 10px;
}
</style>